<template>
	<view class="frame">
		<view class="top_nav_box">
			<navigation-custom :config="config" />
		</view>
		<view class="content_hadrimg">
			<image :src="imgUrl+'non_iocns.png'" mode="aspectFill"></image>
			<view style="width: 100%;background-color: #FDEEEE !important;">
				<image :src="imgUrl+'shuju.png'" mode="" class="yushuj"></image>
				<!-- <view class="asiafafnafa" @click="getxiangafada">
					<view class="asdaaf">
						卫康医美星级薪酬绩效方案
					</view>
					<view class="saitasa_row">
						<image :src="imgUrl+'xcinagfada.png'"  mode="" class="xcinagfada"></image>
						<view class="asliasfasa">
							<view class="asmdiada">
								{{sahfasda.title}}
							</view>
							<view class="asmdiadaadadsda">
								更新时间：{{sahfasda.date}}
							</view>
						</view>
					</view>
				</view>
				<view class="asiafafnafa" @click="getxiangafadass">
					<view class="asdaaf">
						卫康医美星级薪酬绩效方案
					</view>
					<view class="saitasa_row">
						<image :src="imgUrl+'xcinagfada.png'"  mode="" class="xcinagfada"></image>
						<view class="asliasfasa">
							<view class="asmdiada">
								{{sahfasda.title2}}
							</view>
							<view class="asmdiadaadadsda">
								更新时间：{{sahfasda.date2}}
							</view>
						</view>
					</view>
				</view> -->
				<view class="vzhengxings">
					<view class="essay_cent">
						<rich-text :nodes="content"></rich-text>
					</view>
				</view>
				<view class="vzhengxingss">
					<view class="essay_cent">
						<rich-text :nodes="contents"></rich-text>
					</view>
				</view>
				<view class="vzhengxingsss">
					<view class="essay_cent">
						<rich-text :nodes="contentss"></rich-text>
					</view>
				</view>
				<image :src="imgUrl+'weikangsdasd.png'" mode="aspectFill" class="weikang"></image>
				<view class="bolck"></view>
			</view>
		</view>
		<view class="address_fix_box" v-if="isgosem == true">
			<view class="address_fix_btn" @click="show = true" hover-class="address_fix_btn_hover">授权查阅</view>
		</view>
		<!-- 登录弹窗 -->
		<login :show="show" @loadpage="closepage" @closepage="closepage" :avataimage="avataimage" @payment-success="refreshArray"></login>
	</view>
</template>

<script>
	import config from '@/common/config.js';
	import jyfParser from "@/components/jyf-parser/jyf-parser";
	import navigationCustom from "@/components/struggler-navigationCustom/navigation-custom";
	export default {
		components: {
			jyfParser,
			navigationCustom
		},
		data() {
			return {
				config: {
					title: "", //title
					bgcolor: "transparent", //背景颜色
					fontcolor: "#000", //文字颜色，默认白色
					type: 4, //type 1，3胶囊 2，4无胶囊模式
					transparent: false, //是否背景透明 默认白色
					linear: false, //是为开启下滑渐变
					share: false, //是否将主页按钮显示为分享按钮
					menuIcon: "", //当type为3或者4的时候左边的icon文件位置，注意位置与当前页面不一样
				},
				contentss: '',
				contents: '',
				content: '',
				tagStyle: {
					img: 'display: block;width: 100%!important;height:auto!important;',
					p: 'margin-bottom: 10rpx;line-height: 50rpx;padding: 0 20rpx;'
				},
				imgUrl: config.imgUrl,
				show: false,
				avataimage: 'https://star.googom.cn/image/ogsda.png',
				ouoinf: [],
				isgosem: false,
				imasd: '',
				imasds: '',
				imasdss: '',
				sahfasda:{}
			}
		},
		onPageScroll(res) {
			var a = this
			if (0 < res.scrollTop <= 40) {
				a.config.bgcolor = 'rgba(253, 238, 238,0)'
			}
			if (40 < res.scrollTop <= 120) {
				a.config.bgcolor = 'rgba(253, 238, 238, 0.2)'
				a.config.menuIcon = ''
				a.config.title = '卫康医疗美容'
				a.config.fontcolor = '#000'
			}
			if (60 < res.scrollTop <= 220) {
				a.config.bgcolor = 'rgba(253, 238, 238, 0.4)'
				a.config.menuIcon = ''
				a.config.title = '卫康医疗美容'
				a.config.fontcolor = '#000'
			}
			if (res.scrollTop > 220) {
				a.config.bgcolor = 'rgba(253, 238, 238, 1)'
				a.config.menuIcon = ''
				a.config.title = '卫康医疗美容'
				a.config.fontcolor = '#000'
			}
			if (res.scrollTop == 0) {
				a.config.bgcolor = 'rgba(253, 238, 238, 0)'
				a.config.menuIcon = ''
				a.config.title = ''
				a.config.fontcolor = '#000'
			}
		},
		onLoad() {
			//机构展示
			this.getinstitutions()
			//购买须知
			this.getgoo()
		},
		onShow() {
			var taht = this
			var token = uni.getStorageSync('token');
			if (token == '' || token == null || token == undefined) {
				taht.isgosem = true
			} else {
				taht.isgosem = false
			}
		},
		methods: {
			//购买须知
			async getgoo() {
				var that = this
				let datasd = await that.$api.getsystem();
				this.sahfasda = datasd.data 
			},
			refreshArray(){
				var taht = this
				var token = uni.getStorageSync('token');
				if (token == '' || token == null || token == undefined) {
					taht.isgosem = true
				} else {
					taht.isgosem = false
				}
			},
			//机构展示
			async getinstitutions() {
				var that = this;
				let data = await that.$api.getinstitution();
				if (data.code == 1) {
					const regex = new RegExp('<img', 'gi');
					const regexs = new RegExp('<img', 'gi');
					const regexss = new RegExp('<img', 'gi');
					that.ouoinf = data.data;
					if (that.ouoinf.length != 0) {
						that.imasd = that.ouoinf[0].image
						that.imasds = that.ouoinf[1].image
						that.imasds = that.ouoinf[2].image
						console.log(that.imasd)
						var richtext = that.ouoinf[0].content
						richtext = richtext.replace(/<table[^>]*>/gi,
							'<table cellpadding="0" cellspacing="0" max-width="100%" border="1" style="font-size:24rpx;max-width:100%; text-align:left;text-indent: 0em;line-height:24rpx;">'
						);
						that.content = richtext.replace(regex, `<img style="max-width: 100%;"`);

						var richtexts = that.ouoinf[1].content
						richtexts = richtexts.replace(/<table[^>]*>/gi,
							'<table cellpadding="0" cellspacing="0" max-width="100%" border="1" style="font-size:24rpx;max-width:100%; text-align:left;text-indent: 0em;line-height:24rpx;">'
						);
						that.contents = richtexts.replace(regexs, `<img style="max-width: 100%;"`);
						var richtextss = that.ouoinf[2].content
						richtextss = richtextss.replace(/<table[^>]*>/gi,
							'<table cellpadding="0" cellspacing="0" max-width="100%" border="1" style="font-size:24rpx;max-width:100%; text-align:left;text-indent: 0em;line-height:24rpx;">'
						);
						that.contentss = richtextss.replace(regexss, `<img style="max-width: 100%;"`);
					}
				} else {
					uni.showToast({
						title: data.msg,
						icon: "none"
					})
				}
			},
			closepage() {
				this.show = false
			},
			getxiangafada(){
				uni.navigateTo({
					url: '/pages/page/learningworld_detil'
				})
			},
			getxiangafadass(){
				uni.navigateTo({
					url: '/pages/page/learningworld_detils/learningworld_detils'
				})
			}
		}
	}
</script>

<style lang="scss">
	.frame {
		width: 100%;
		min-height: 100vh;
		position: relative;
		background-color: #FDEEEE !important;

		.top_nav_box {
			top: 0;
			left: 0;
			z-index: 99;
		}

		.content_hadrimg {
			width: 750rpx;
			height: 580rpx;
			position: absolute;
			top: 0;
		}

		image {
			width: 100%;
			height: 100%;
		}

		.address_fix_box {
			width: 750rpx;
			height: 140rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 999;
			background-color: #FFFFFF;
			box-shadow: 0rpx 3rpx 42rpx 0rpx rgba(0, 0, 0, 0.05);
			border-top: 2rpx solid #FDEEEE;

			.address_fix_btn {
				width: 686rpx;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 30rpx;
				font-weight: bold;
				text-align: center;
				letter-spacing: 0.6rpx;
				color: #FFFFFF;
				background: linear-gradient(270deg, #FF8D8D 0%, #FD2E2E 100%);
				border-radius: 200rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				margin-bottom: 25rpx;
			}

			.address_fix_btn_hover {
				opacity: 0.8;
			}
		}

		.yushuj {
			width: 702rpx;
			height: 406rpx;
			position: relative;
			margin-top: -80rpx;
			margin-left: 24rpx;
		}
		
		.asiafafnafa{
			width: 702rpx;
			height: 304rpx;
			background-image: url('https://star.googom.cn/image/xingsadad.png');
			background-size: 100% 100%;
			margin-left: 24rpx;
			margin-top: 48rpx;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			.asdaaf{
				    font-size: 28rpx;
				    font-weight: bold;
				    color: #08112C;
				    margin-left: 62rpx;
				    margin-top: 28rpx;
			}
			.saitasa_row{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				margin-top: 30rpx;
				margin-left: 24rpx;
				.xcinagfada{
					width: 176rpx;
					height: 176rpx;
				}
				.asliasfasa{
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: flex-start;
					margin-left: 20rpx;
					.asmdiada{
						width: 450rpx;
						font-size: 32rpx;
						font-weight: bold;
						color: #08112C;
						display: -webkit-box;
						overflow: hidden;
						word-break: break-all;
						text-overflow: ellipsis;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}
					.asmdiadaadad{
						width: 450rpx;
						font-size: 26rpx;
						color: #7C849C;
						display: -webkit-box;
						overflow: hidden;
						word-break: break-all;
						text-overflow: ellipsis;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						margin-top: 16rpx;
					}
					.asmdiadaadadsda{
						width: 450rpx;
						font-size: 26rpx;
						color: #7C849C;
						display: -webkit-box;
						overflow: hidden;
						word-break: break-all;
						text-overflow: ellipsis;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						margin-top: 50rpx;
					}
				}
			}
		}

		.vzhengxings {
			width: 702rpx;
			background-image: url('https://star.googom.cn/image/zhengingsd.png');
			background-size: 100% 100%;
			margin-left: 24rpx;
			padding-top: 118rpx;
			box-sizing: border-box;
			margin-top: 48rpx;
			padding-bottom: 30rpx;

			.essay_cent {
				width: 650rpx;
				font-size: 26rpx;
				color: #08112C;
				line-height: 215%;
				letter-spacing: 0.02em;
				margin-left: 28rpx;
			}
		}

		.vzhengxingss {
			width: 702rpx;
			background-image: url('https://star.googom.cn/image/weikagsd.png');
			background-size: 100% 100%;
			margin-left: 24rpx;
			padding-top: 118rpx;
			box-sizing: border-box;
			margin-top: 48rpx;
			padding-bottom: 30rpx;

			.essay_cent {
				width: 650rpx;
				font-size: 26rpx;
				color: #08112C;
				line-height: 231%;
				letter-spacing: 0.02em;
				margin-left: 28rpx;
			}
		}

		.vzhengxingsss {
			width: 702rpx;
			background-image: url('https://star.googom.cn/image/suzhous.png');
			background-size: 100% 100%;
			margin-left: 24rpx;
			padding-top: 118rpx;
			box-sizing: border-box;
			margin-top: 48rpx;
			padding-bottom: 30rpx;

			.essay_cent {
				width: 650rpx;
				font-size: 26rpx;
				color: #08112C;
				line-height: 235%;
				letter-spacing: 0.02em;
				margin-left: 28rpx;
			}
		}


		.weikang {
			width: 260rpx;
			height: 152rpx;
			margin-top: 88rpx;
			margin-bottom: 48rpx;
			margin-left: 238rpx;
		}
	}
</style>